<template>
  <a-upload
    v-model:file-list="fileList"
    name="avatar"
    multiple
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    :before-upload="beforeUpload"
    @change="handleChange"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <loading-outlined v-if="loading"></loading-outlined>
      <plus-outlined v-else></plus-outlined>
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>

<script>
import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { defineComponent, ref } from "vue";
import http from "/src/utils/http.js";
import io from "socket.io-client";
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  name: "upload",
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  setup() {
    const fileList = ref([]);
    const loading = ref(false);
    const imageUrl = ref("");
    let conn;
    const wsInit = () => {
      if (window["WebSocket"]) {
        let id = new Date().getTime();
        conn = new WebSocket(`ws://localhost:9999/ws/${id}`);

        conn.onopen = function (evt) {
          conn.send("hello");
        };
        conn.onclose = function (evt) {
          console.log("closed");
        };
        conn.onmessage = function (evt) {
          var messages = evt.data.split("\n");
          console.log(messages);
        };
      }
    };
    wsInit();
    const handleChange = async (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        loading.value = false;
      }

      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
      let form = new FormData();
      if (info.fileList && info.fileList.length) {
        info.fileList.forEach((item) => {
          form.append("files", item.originFileObj);
        });
      }
      let res = await http({
        url: "/v2/file/upload",
        method: "POST",
        headers: {
          Authorization: `jVKKIAnG684VOxbcY6gY21H4aq521Kqj9YYhFNV8MJF/g0ybMy/xkHd86lNBXX0FmlnTyOm943IFdP/MEpcDKUzvu3s8fzCTO8y7nCvj6/uDtZLOYJ5CdEqBttsPqsVBW72kQtStWmAzmZD8FoyYL+OIzCnDbGPmPrxBddq2QsQ=`,
          "Content-Type": "multipart/form-data",
        },
        data: form,
      });
      console.log(res);
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";

      if (!isJpgOrPng) {
        message.error("You can only upload JPG file!");
      }

      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isLt2M) {
        message.error("Image must smaller than 2MB!");
      }

      return isJpgOrPng && isLt2M;
    };

    return {
      fileList,
      loading,
      imageUrl,
      handleChange,
      beforeUpload,
      conn,
    };
  },
};
</script>

<style></style>
